<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>微信大屏幕</title>
	<link type="text/css" href="{{__TEMPLATE__}}/css/base.css" rel="stylesheet">
    <link type="text/css" href="{{__TEMPLATE__}}/css/index.css" rel="stylesheet">
    <script type="text/javascript" src="{{__TEMPLATE__}}/Scripts/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
        var threeHeight = document.documentElement.clientHeight - 100;
        //单条高度
        var singleHeight = 100;
        console.log(singleHeight);
        var total = 3;
        function setHeight() {
            var max_height = document.documentElement.clientHeight;
            var x = document.getElementById('wrap');
            x.style.minHeight = max_height + "px";
            x.style.maxHeight = max_height + "px";
            var y = document.getElementById('container');
            y.style.minHeight = (max_height) + "px";
            y.style.maxHeight = (max_height) + "px";
            var z = document.getElementById('content');
            z.style.minHeight = (max_height - 100) + "px";
            z.style.maxHeight = (max_height - 100) + "px";
        }
        function Slide() {
            var h = (-$("#UL").position().top) - singleHeight + "px";
            //$("#UL").css("margin-top",h);
            $("#UL").animate({
                'margin-top': h
            });
            console.log($("#UL").position().top);
            console.log("测试");
        }
    </script>
</head>
<body onresize="setHeight();" onload="setHeight();">
<div class="wrap" id="wrap">
    <div class="container" id="container">
        <!--顶部栏-->
        <div class="header">
            <div class="left">
                <img src="{{__TEMPLATE__}}/images/logo_v6.png">
            </div>
            <div class="right">
                <div class="word">
                    <div class="word-item-1">
                        <p>关注微信公众号：gh_5a101b56a3fb</p>

                        <p>发送你想说的，即可上墙</p>
                    </div>
                    <div class="word-item-2">
                        <span id="total-num">0</span>

                        <p>条消息</p>
                    </div>
                </div>
                <div class="logo">
                    <img src="{{__TEMPLATE__}}/images/oureda.jpg">
                </div>
            </div>
        </div>
        <!--中部信息-->
        <div class="content" id="content">
            <div class="inner">
                <ul id="UL">

                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    var pos = 1;
    function get() {
        $.get('{{web_url("site/get")}}', {"pos": pos}, function (res) {
            var html = '';
            $(res.data).each(function (i) {
                html +="<li><div class='single'><div class='pic'><img src='"+
                		res.data[i].headimgurl+
                		"'></div><div class='message'><div class='s-name'><span>"+
                		res.data[i].nickname+"</span>　：</div><div class='s-word'>"+
						res.data[i].content +"</div></div></div></li>";
            });
            pos = parseInt(res.pos)+1;
            $("#UL").prepend(html);
            $("#total-num").html(res.num);
        }, 'json');
    }
    setInterval(get, 2000);
</script>